<!DOCTYPE html>
<html>
<head>
    <% include ../common/public.ejs %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>签到</title>
    <style>
        #container {
            background: #fff;
        }
        .goBack{
            position: absolute;
            top: 15px;
            left: 15px;
            color: #fff;
            cursor: pointer;
        }
        .calendarPanel{
            background: #eee;
            padding: 70px 15px 15px;
            position: relative;
        }
        .calendarPanel .calendarPanelBody{
            background: #ffffff;
            border-radius: 5px;
            position: relative;
            padding: 45px 15px 15px;
            text-align: center;
        }
        .calendarPanel .calendarPanelBody .todayFlag{
            background: #ffffff;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            position: absolute;
            left: 50%;
            margin-left: -40px;
            top: -40px;
            box-shadow: 0 0 10px #eee;

            line-height: 80px;
            text-align: center;
        }
        .calendarPanel .calendarPanelBody .totalPoint{
            display: inline-block;
            background: #eee;
            padding: 1px 15px;
            border-radius: 30px;
            margin: 0 auto 5px;
            font-size: 14px;
            color: #ffffff;
        }
        .calendarPanel .calendarPanelBody .calendarTitle{
            font-size: 14px;
            color: #9a9a9a;
        }
        .calendarPanel .calendarPanelBody hr{
            border-color: #fcfcfc;
        }
        .calendarPanel .calendarPanelBody .calendarBody{
            table-layout: fixed;
            width:90%;
            margin: 10px auto;
        }
        .calendarPanel .calendarPanelBody .calendarBody thead{
            font-size: 14px;
            color: #c3c3c3;
        }
        .calendarPanel .calendarPanelBody .calendarBody td{
            height: 35px;
            vertical-align: top;
        }
        .calendarPanel .calendarPanelBody .calendarBody td.today{
            color:#eee;
        }
        .calendarPanel .calendarPanelBody .calendarBody td .signFlag{
            background:#eee;
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 auto;
        }
        .calendarPanel .calendarPanelBody .footer{
            text-align: left;
            color: #aaaaaa;
            font-size: 14px;
            margin: 10px 0 0;
        }

        .recordPanel{
            padding: 0 20px;
            color: #404040;
        }
        .recordPanel .recordItem{
            padding: 10px 20px;
        }
        .recordPanel .recordItem + .recordItem{
            border-top: 1px solid #f0f0f0;
        }
        .recordPanel .recordItem .point, .recordPanel .recordItem .coupon{
            float: right;
        }
        .recordPanel .recordItem .point:before{
            content: '+'
        }

        footer {
            text-align: center;
            padding: 10px 0 5px;
            color: #000;
            opacity: 0.4;
            font-size: 12px;
        }


        .pageFooter{
            text-align: center;
            background: #eee;
            padding:10px;
        }
        .pageFooter img{
            height: 20px;
            display: block;
            margin: 0 auto;
        }

        .signInfo{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }
        .signInfo .signInfoModel{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            opacity: 0.5;
        }
        .signInfo .signInfoPanel{
            position: absolute;
            width: 300px;
            background: #fafafa;
            border-radius: 20px;
            padding: 20px;
            left: 50%;
            margin-left: -170px;
            top: 30%;
        }
        .signInfo .signInfoPanel .signInfoTitle{
            text-align: center;
            color: #eee;
            font-size: 22px;
        }
        .signInfo .signInfoPanel .signInfoContent{
            text-align: center;
            color: #aaa;
        }
        .signInfo .signInfoPanel .signInfoButton{
            text-align: center;
            margin-top: 30px;
        }
        .signInfo .signInfoPanel .signInfoButton button{
            padding: 10px 50px;
            border-radius: 20px;
            border: 0;
            background: #eee;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
        .signInfo .signInfoPanel .signInfoClose{
            position: absolute;
            width: 30px;
            height: 30px;
            bottom: -80px;
            left: 50%;
            margin-left: -15px;
            border: 2px solid #ddd;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            color: #ddd;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="calendarPanel">
        <div class="goBack">
            返回
        </div>
        <div class="calendarPanelBody">
            <div class="todayFlag" id="todayFlag">
                签到
            </div>
            <div class="totalPoint">
                已累计获得 <span id="totalPoint">200</span> 积分
            </div>

            <div class="calendarTitle" id="calendarTitle"></div>
            <hr/>
            <table class="calendarBody">
                <thead>
                <tr>
                    <td>周一</td>
                    <td>周二</td>
                    <td>周三</td>
                    <td>周四</td>
                    <td>周五</td>
                    <td>周六</td>
                    <td>周日</td>
                </tr>
                </thead>
                <tbody id="calendarDate">
                <!--<tr>-->
                    <!--<td></td>-->
                    <!--<td></td>-->
                    <!--<td class="today">1<i class="signFlag"></i></td>-->
                    <!--<td>2</td>-->
                    <!--<td>3</td>-->
                    <!--<td></td>-->
                    <!--<td></td>-->
                <!--</tr>-->
                </tbody>
            </table>
            <hr/>
            <div class="footer">
                已连续签到 <span id="maxDays"></span> 天，累计签到 <span id="totalDays"></span> 天
            </div>
        </div>
    </div>
    <div class="recordPanel" id="recordPanel">
        <!--<div class="recordItem">-->
            <!--2018-09-10-->
            <!--<span class="point">5</span>-->
        <!--</div>-->
        <!--<div class="recordItem">-->
            <!--2018-09-05-->
            <!--<span class="coupon">礼券</span>-->
        <!--</div>-->
    </div>
    <div class="pageFooter">
        <img src="" class="preview-footerLogo" />
    </div>


    <div class="signInfo">
        <div class="signInfoModel"></div>
        <div class="signInfoPanel">
            <h3 class="signInfoTitle">签到成功</h3>
            <div class="signInfoContent">恭喜获取30积分</div>
            <div class="signInfoButton">
                <button>确认</button>
            </div>
            <div class="signInfoClose">X</div>
        </div>
    </div>
</div>
<footer>技术支持：上海法法信息</footer>
<% include ../common/footer.ejs %>
</body>
</html>
